

import React, { useEffect, useRef } from 'react'
import { Row, Col, Form, Input, Button, Typography, Select } from "antd"
import * as echarts from "echarts"

import vip from '../../mobx/store/vip';
import { observer } from 'mobx-react';

const { Title } = Typography
function VipDel() {

    const { vipList, changevipList, vipQuery, vipgetUserList } = vip
    const chartTwo: any = useRef()
    useEffect(() => {
        vipQuery({})
        setTimeout(() => {
            chartInitTwo()
        }, 1000)
    }, [])

    const chartInitTwo = () => {
        var myChart = echarts.init(chartTwo.current)
        var data = vipList.map((item: any) => {
            console.log(item);

            item.name = item.age
            console.log(item.gender);

            item.value = vipList.filter((v: any) => v.age == item.age).length
            // item.value = vipList.filter((v: any) => v.gender == item.gender).length
            console.log(vipList.filter((v: any) => v.value == item.value).length);

            return item;

        })

        console.log(data);

        var option = {
            title: {
                text: "会员年龄分析"
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '年龄',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data
                }
            ]
        };

        myChart.setOption(option);
    }




    return (
        <div style={{ height: "100%" }}>
            <Title level={2}> 会员数据分析 </Title>
            <Row >

                <Col span={11} offset={1}>
                    <div className="ebox" ref={chartTwo} style={{ padding: 12, width: '100%', height: 440, border: '1px solid #ddd', borderRadius: "10px" }} id="charttwo"></div>
                </Col>
            </Row>
        </div>

    )
}
export default observer(VipDel)